<template>
    <!-- 注册页面 -->
    <div class="reg">
        <mt-header title="用户注册">
            <router-link slot="left" to="/"> 返回首页 </router-link>
            <router-link to="/login" slot="right">去登录</router-link>
        </mt-header>
        <mt-field
                type="text"
                label="用户名"
                placeholder="请输入用户名"
                v-model="name"
                :state="nameState"
                @blur.native.capture="checkName"></mt-field>
        <!-- @blur失焦，输入框在输入完成、移到其他地方时进行验证 -->
        <mt-field
                type="password"
                label="密码"
                placeholder="请输入密码"
                v-model="pwd"
                :state="pwdState"
                @blur.native.capture="checkPwd"></mt-field>
        <mt-field
                type="password"
                label="确认密码"
                placeholder="再次输入密码"
                v-model="repwd"
                :state="repwdState"
                @blur.native.capture="checkrePwd"></mt-field>
        <mt-field
                label="邮箱"
                placeholder="请输入邮箱"
                type="email"
                v-model="email"
                :state="emailState"
                @blur.native.capture="checkEmail"></mt-field>
        <mt-field
                label="手机号"
                placeholder="请输入手机号"
                type="tel"
                v-model="phone"
                :state="phoneState"
                @blur.native.capture="checkPhone"></mt-field>
        <mt-field
                label="生日"
                placeholder="请输入生日"
                type="date"
                v-model="birthday"></mt-field>
        <mt-button class="btn" type="primary" size="large" @click="checkForm">注册</mt-button>
    </div>
</template>

<style scope>
    .reg .btn {
        background-color: #d86931;
        width: 190px;
        border-radius: 0;
        border: 0;
        margin: auto;
    }
    .reg .mint-cell-wrapper {
        line-height: 80px;
    }
    .reg {
        margin-top: 14%;
    }

    .reg .mint-header {
        background-color: #d86931;
    }
    .reg .btn {
        background-color: #d86931;
    }
</style>

<script>
    export default {
        data() {
            return {
                name: "", //双向数据绑定 用户名输入框
                nameState: "", //处理用户名输入框的动态更新
                pwd: "",
                pwdState: "",
                repwd: "",
                repwdState: "",
                email: "",
                emailState: "",
                phone: "",
                phoneState: "",
                birthday: "",
            };
        },
        methods: {
            // 封装各个字段的验证方法：
            // 1.验证用户名
            checkName() {
                //事件处理函数：处理点击按钮验证表单
                let reg = /^[a-zA-Z0-9一-龥]{2,6}$/;
                if (reg.test(this.name)) {
                    this.nameState = "success";
                    return true;
                } else {
                    this.nameState = "error";
                    return false;
                }
            },
            // 2.验证密码
            checkPwd() {
                let reg = /^d{6}$/;
                if (reg.test(this.pwd)) {
                    this.pwdState = "success";
                    return true;
                } else {
                    this.pwdState = "error";
                    return false;
                }
            },
            // 3.重复输入密码
            checkrePwd() {
                let reg = /^d{6}$/;
                if (reg.test(this.repwd) && this.pwd == this.repwd) {
                    this.repwdState = "success";
                    return true;
                } else {
                    this.repwdState = "error";
                    return false;
                }
            },
            // 4.验证邮箱格式
            checkEmail() {
                let reg = /^([a-zA-Z]|[0-9])(w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/;
                if (reg.test(this.email)) {
                    this.emailState = "success";
                    return true;
                } else {
                    this.emailState = "error";
                    return false;
                }
            },
            // 5.验证手机号
            checkPhone() {
                let reg = /^1[3|5|7|8][0-9]d{8}$/;
                if (reg.test(this.phone)) {
                    this.phoneState = "success";
                    return true;
                } else {
                    this.phoneState = "error";
                    return false;
                }
            },

            checkForm() {
                // 点击注册按钮后调用此方法，验证用户名、密码、二次密码是否均正确，正确则发送axios请求
                if (this.checkName() && this.checkPwd() && this.checkrePwd()) {
                    console.log(`验证成功，执行注册业务......`);
                    // 发送注册(post)请求
                    this.axios
                        .post("/register", `username=${this.name}&password=${this.pwd}`)
                        .then((result) => {
                            console.log(result);
                            if (result.data.code == 200) {
                                // 弹窗提示注册成功
                                this.$toast({
                                    message: "注册成功",
                                    position: "bottom",
                                    duration: 3000,
                                });
                                // 注册成功后直接跳转到登录页
                                this.$router.push("/login");
                            } else if (result.data.code == 201) {
                                this.$toast({
                                    message: "用户已存在，请重新注册",
                                    position: "bottom",
                                    duration: 3000,
                                });
                            }
                        });
                }
            },
        },
    };
</script>
